<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生命周期函数</title>
		<script src="./js/vue.js"></script>
		<style>
		</style>
	</head>
	<body>
		<!--
		生命周期:
			1.又名:生命周期回调函数,生命周期函数、生命周期钩子。
			2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
			3.生命周期函数的名字不能更改,但函数的具体内容是程序员根据需求编写的.
			4.生命周期函数中的this指向的是vm 或 组件实例对象
			
		常用的生命周期钩子:
			1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]
			2.beforeDestroy: 清除定时器、解析自定义事件、取消订阅消息等[收尾工作]
			
		关于销毁Vue实例
			1.销毁后借助Vue开发者工具看不到任何信息
			2.销毁后自定义事件会失效,但原生DOM事件依然有效.
			3.一般不会在beforeDestroy操作数据,因为即使操作数据，也不会再触发更新流程了。
		-->
		<div id="root">
			<h2 :style="{opacity}">杭州欢迎你</h2>
			<span>{{opacity}}</span>
			<button @click="stopRun">停止运行</button>
			<button @click="bye">销毁vm</button>
		</div>
		<script>
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#root',
				data:{
					opacity:1
				},
				// Vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted
				mounted(){
					this.interval = setInterval(() => {
						this.opacity -= 0.01;
						if(this.opacity <= 0) {
							this.opacity = 1;
						}
					},100);
				},
				directives:{
					
				},
				beforeCreate(){
					console.log('beforeCreate');
				},
				created(){
					console.log('created');
				},
				beforeMount(){
					console.log('beforMount');
					console.log(this);
				},
				beforeUpdate(){
					console.log('beforeUpdate');
					console.log(this.opacity);
				},
				updated(){
					console.log('updated');
					console.log(this.opacity);
				},
				methods:{
					bye(){
						console.log('bye');
						
					},
					stopRun(){
						clearInterval(this.interval);
					}
				},
				beforeDestroy() {
					console.log('beforeDestory');
					this.$destroy();
				},destroyed(){
					console.log('destoryed');
				}
			});
		</script>
	</body>
</html>